<template>
    <div>
        <el-row>
            <el-col :span="is_full ? 24 : 18">
                <div style="position: relative;height: calc(100vh - 4rem - 4px);">
                    <div class="position-relative height-100b width-100b scroll-window" ref="bgScroll">
                        <div :key="index" :style="'background:url(' + item.first_frame + ') no-repeat center center;background-size:cover;overflow: hidden;filter: blur(30px);top:' + (index * 100) + '%'" class="player-item" v-for="(item, index) in data"></div>
                    </div>
                    <div id="player" ref="player"></div>
                    <!-- 左下角视频简介部分 -->
                    <div class="author-info">
                        <div @click="toPath('/user-homepage?user_id=' + data[current_index].author.id)" class="color-eee font-18 cursor-pointer">@{{ data[current_index].author.name }}</div>
                        <div class="color-fff mt-8 font-16 text-line3">
                            <span class="color-eee">{{ data[current_index].creation_name }}</span>
                            <span :key="index" class="color-yellow-light cursor-pointer" v-for="(item, index) in  data[current_index].labels">#{{ item }}</span>
                        </div>
                        <div class="position-absolute color-fff need-pay marginTop5 hand" v-if="data[current_index].ad_info">
                            <span>广告</span>
                            <span @click.stop="openAd(data[current_index].ad_info.url)" class="pl-5 color-yellow-light">
                                跳转详情
                                <i class="el-icon-arrow-right"></i>
                            </span>
                        </div>
                    </div>

                    <div class="need-recharge" style="z-index: 100000;" v-show="need_recharge">
                        <div class="need-recharge-close">
                            <i @click="need_recharge = false" class="el-icon el-icon-close color-fff cursor-pointer font-12"></i>
                        </div>
                        <el-image :src="require('@/assets/icon/live/coin.png')" fit="cover" style="width: 65px;height: 65px;margin-top: 23px;"></el-image>
                        <div class="mt-15 font-18 color-fff">{{$store.state.config.coin_name}}不足</div>
                        <div class="mt-5 color-fff font-13">{{$store.state.config.coin_name}}余额不足 请先充值</div>
                        <div @click="toRecharge" class="need-recharge-recharge cursor-pointer">立即充值</div>
                    </div>

                    <!-- 视频右边是作者信息 -->
                    <div class="more-info flex flex-dre-column">
                        <div @click="toPath('/user-homepage?user_id=' + data[current_index].author.id)" class="position-relative cursor-pointer">
                            <el-avatar :size="45" :src="data[current_index].author.avatar"></el-avatar>
                            <div class="position-absolute more-info-attention cursor-pointer" v-if="!data[current_index].attention">+</div>
                        </div>
                        <div class="mt-20 color-fff font-15 text-center flex flex-dre-column align-center">
                            <div v-show="!like_loading">
                                <el-image :src="require('@/assets/icon/video/like.png')" @click.stop="likeAction(1); share_visible = false" class="cursor-pointer" fit="fill" style="width: 32px;height:32px;" v-show="!data[current_index].liked_count"></el-image>
                                <el-image :src="require('@/assets/icon/video/liked.png')" @click.stop="likeAction(0); share_visible = false" class="cursor-pointer" fit="fill" style="width: 32px;height:32px;" v-show="data[current_index].liked_count"></el-image>
                            </div>
                            <el-image :src="require('@/assets/gif/liking.gif')" class="cursor-pointer" fit="fill" style="width: 32px;height:32px;" v-show="like_loading"></el-image>
                            <span>{{ data[current_index].like_count | formatNumber }}</span>
                        </div>
                        <div @click.stop="is_full = !is_full; share_visible = false" class="mt-13 color-fff font-15 text-center flex flex-dre-column align-center">
                            <el-image :src="require('@/assets/icon/video/comment.png')" class="cursor-pointer" fit="fill" style="width: 32px;height:32px;"></el-image>
                            <span>{{ data[current_index].comment_count | formatNumber }}</span>
                        </div>
                        <div @click.stop="share_visible = !share_visible" class="mt-13 color-fff font-15 text-center flex flex-dre-column align-center position-relative">
                            <el-image :src="require('@/assets/icon/video/share.png')" class="cursor-pointer" fit="fill" style="width: 32px;height:32px;"></el-image>
                        </div>
                        <div @click.stop="$refs.complaint.visible = true" class="mt-13 color-fff font-13 text-center flex flex-dre-column align-center">
                            <el-image :src="require('@/assets/icon/video/complaint.png')" class="cursor-pointer" fit="fill" style="width: 32px;height:32px;"></el-image>
                            <span>举报</span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="is_full ? 0 : 6">
                <div class="box back151225 marginBottom20 colorFFF comment-window" style="height: calc(100vh - 4rem - 30px);">
                    <comment :creation="data[current_index]" ref="comment"></comment>
                </div>
            </el-col>
        </el-row>

        <div class="position-absolute share-card" v-if="share_visible">
            <div class="color-fff">分享视频</div>
            <div class="font-18 color-fff flex align-center mt-10 share-box">
                <div @click.stop="changeFriendIndex('decrement')" class="width-8b text-center">
                    <i class="el-icon-arrow-left cursor-pointer"></i>
                </div>
                <div class="flex align-center width-84b scroll-friend" ref="friend" style="scroll-behavior: smooth;overflow-x: scroll;" v-if="contacters.length > 0">
                    <div :class="{ 'ml-4': index > 0 }" :key="index" v-for="(item, index) in contacters">
                        <div @click.stop="shareToFriend(item.userProfile.userID)" class="width-60 text-center cursor-pointer">
                            <div class="flex jus-center">
                                <el-avatar :size="45" :src="item.userProfile.avatar"></el-avatar>
                            </div>
                            <div :title="item.userProfile.nick" class="font-13 text-line1">{{ item.userProfile.nick }}</div>
                        </div>
                    </div>
                </div>
                <div class="text-center flex-1 color-999" v-else>暂无好友，去找别人聊聊吧~</div>
                <div @click.stop="changeFriendIndex('increment')" class="width-8b text-center">
                    <i class="el-icon-arrow-right cursor-pointer"></i>
                </div>
            </div>
            <div @click.stop="copyLink" class="mt-20 text-center pt-8 pb-8 color-fff width-90b cursor-pointer flex align-center jus-center" style="margin-left:5%;border:1px solid #353047;">
                <i class="el-icon-paperclip font-14"></i>
                <span>复制链接</span>
            </div>
        </div>

        <need-pay :creation="data[current_index]" @donePay="donePay" @needRecharge="need_recharge = true" ref="fee"></need-pay>
        <complaint :creation="creation" ref="complaint"></complaint>
    </div>
</template>

<script>
import Player from 'xgplayer'
import HlsPlayer from 'xgplayer-hls'
import sortPlugin from '@/components/video/player-plugin/sort'
import fullIcon from '@/assets/icon/video/full.png'
import mutedIcon from '@/assets/icon/video/muted_empty.png'
import mutedInvalidIcon from '@/assets/icon/video/muted_invalid_empty.png'
import comment from '@/components/video/comment/index'
import needPay from '@/components/video/need-pay.vue'
import complaint from '@/components/video/complaint.vue'
export default {
    components: {
        comment,
        needPay,
        complaint,
    },
    data() {
        return {
            data: [],
            query: {
                page: 1,
                size: 10,
                creation_type: 'short',
            },
            current_index: 0,
            player: null,
            played: false,
            currentActive: 0,
            scrolling: false,
            player_height: 0,
            is_full: false,
            creation: null,
            need_recharge: false,
            like_loading: false,
            share_visible: false,
            current_friend_index: 0,
            // total: 0,
        }
    },
    computed: {
        contacters() {
            return this.$store.state.system.contacters
        },
    },
    mounted() {
        this.getCreation()
        window.addEventListener('wheel', this.handleMouseWheel, {
            passive: false,
        })
        this.player_height = this.$refs.player.offsetHeight
    },
    beforeDestroy() {
        window.removeEventListener('wheel', this.handleMouseWheel, {
            passive: false,
        })
    },

    updated() {
        this.$refs.comment.data = []
        this.$refs.comment.inited = false
        this.$refs.comment.beforeInit()
    },

    methods: {
        getCreation() {
            this.$request.get('/creation/index', this.query).then((res) => {
                console.log(res, '作品')
                this.data = this.data.concat(res.items)
                // this.creation = this.data.items[0]
                if (this.played == false) {
                    this.toPlay()
                }
            })
        },

        changeFriendIndex(type) {
            let width = document.getElementsByClassName('share-box')[0].offsetWidth * 0.84
            let placeholer_num = Math.round(width / 62)
            let end_index = this.contacters.length - placeholer_num
            if (type == 'increment') {
                if (this.current_friend_index < end_index) {
                    this.current_friend_index++
                    document.getElementsByClassName('scroll-friend')[0].scrollLeft = this.current_friend_index * 62
                }
            } else {
                if (this.current_friend_index > 0) {
                    this.current_friend_index--
                    document.getElementsByClassName('scroll-friend')[0].scrollLeft = this.current_friend_index * 62
                }
            }
        },

        shareToFriend(user_id) {
            console.log(user_id)
            this.$store.state.system.message = {
                to: user_id,
                payload: {
                    data: JSON.stringify({
                        longItem: {},
                        postItem: {},
                        shortItem: {
                            creation_id: this.data[this.current_index].creation_id,
                            first_frame: this.data[this.current_index].first_frame,
                        },
                        type: 'short',
                    }),
                    description: '',
                    extension: '',
                },
            }
            this.share_visible = false
            this.$message({
                message: '已分享',
                type: 'success',
                customClass: 'super-message',
            })
        },

        donePay(value) {
            let param = {
                value: value,
                index: this.index,
            }
            this.$emit('setMedia', param)
        },
        toRecharge() {
            this.$router.push({ path: '/wallet/recharge' })
        },
        likeAction(type) {
            let param = {
                creation_id: this.data[this.current_index].creation_id,
                type: type,
            }
            this.like_loading = true
            this.$request
                .post('/creation/like/create', param)
                .then((res) => {
                    if (type) {
                        this.data[this.current_index].like_count++
                        this.data[this.current_index].liked_count = true
                    } else {
                        this.data[this.current_index].like_count--
                        this.data[this.current_index].liked_count = false
                    }
                })
                .catch((err) => {
                    this.$message.error(err.message)
                })
                .finally(() => {
                    this.$nextTick(() => {
                        this.like_loading = false
                    })
                })
        },
        openAd(url) {
            window.open(url)
        },
        toPath(url) {
            //this.$router.push(url)
            if (Object.keys(this.$store.state.user.user).length) {
                window.open(url, '_blank')
            } else {
                this.$store.dispatch('system/showLogin')
            }
        },
        handleMouseWheel(e) {
            if (this.scrolling == true) {
                return false
            }
            console.log(e)

            let valid_action = false
            if (e.wheelDelta) {
                // 判断浏览器IE，谷歌滑轮事件
                if (e.wheelDelta > 0) {
                    if (this.current_index > 0) {
                        this.current_index--
                        valid_action = true
                        this.share_visible = false
                        this.$refs.complaint.visible = false
                    }
                }
                if (e.wheelDelta < 0) {
                    // 当滑轮向下滚动时
                    if (this.current_index < this.data.length - 1) {
                        this.current_index++
                        valid_action = true
                        this.share_visible = false
                        this.$refs.complaint.visible = false
                    }
                }
            } else if (e.detail) {
                // Firefox滑轮事件
                if (e.detail > 0) {
                    if (this.current_index < this.data.length - 1) {
                        this.current_index++
                        valid_action = true
                        this.share_visible = false
                        this.$refs.complaint.visible = false
                    }
                }
                if (e.detail < 0) {
                    if (this.current_index > 0) {
                        this.current_index--
                        valid_action = true
                        this.share_visible = false
                        this.$refs.complaint.visible = false
                    }
                }
            }
            if (valid_action) {
                this.$nextTick(() => {
                    this.player.destroy()
                    this.player = null
                    this.scrolling = true
                    let ref = this.$refs.bgScroll
                    ref.scrollTop = this.current_index * this.player_height
                    let that = this
                    setTimeout(() => {
                        that.toPlay()
                    }, 500)
                })
                if (this.current_index + 5 >= this.data.length) {
                    this.query.page++
                    this.getCreation()
                }
            }
            // if(this.){

            // }

            // //加载完了再 恢复true
            // this.$nextTick(() => {
            //     this.scrolling = false
            //     console.log(this.scrolling)
            // })
        },
        swich() {},
        toPlay() {
            if (this.player) {
                this.player.destroy()
                this.player = null
            }
            this.$nextTick(() => {
                this.player = new Player({
                    id: 'player',
                    url: this.data[this.current_index].m3u8_media,
                    autoplay: true,
                    fluid: true,
                    plugins: [HlsPlayer, sortPlugin],
                    ignores: ['replay'],
                    cssFullscreen: false,
                    playbackRate: [0.5, 1, 1.5, 2],
                    controls: true,
                    marginControls: true,
                    commonStyle: {
                        playedColor: '#ffffff',
                        cachedColor: 'transparent',
                        sliderBtnStyle: {
                            background: '#fff',
                        },
                    },
                    icons: {
                        fullscreen: fullIcon,
                        volumeMuted: mutedIcon,
                        volumeLarge: mutedInvalidIcon,
                        volumeSmall: mutedInvalidIcon,
                    },
                })
                // let player = new Player({
                //     /*配置*/
                // })
                let that = this
                this.player.once('canplay', () => {
                    that.$nextTick(() => {
                        that.scrolling = false
                    })
                })
                // this.player.play()
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.player-item,
#player {
    height: 100% !important;
    position: absolute;
    // top: calc(4rem + 4px);
    width: 100% !important;
    padding-top: 0 !important;
    background: transparent;
}

#player {
    top: 0;
}

/deep/.xg-get-fullscreen,
/deep/.xg-volume,
/deep/.xg-volume-small,
/deep/.xg-volume-mute {
    width: 24px !important;
}

.scroll-window {
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.scroll-window::-webkit-scrollbar {
    display: none;
}

.comment-window {
    position: relative;
    z-index: 1000;
    height: 100%;
}
.author-info {
    position: absolute;
    bottom: 10%;
    left: 40px;
    z-index: 100000;
}
.more-info {
    position: absolute;
    right: 40px;
    top: 20%;
    z-index: 1000;

    &-attention {
        top: -2px;
        right: -5px;
        background: #ff1c6d;
        padding: 4px;
        border-radius: 100%;
        color: #fff;
        width: 10px;
        height: 10px;
        line-height: 7px;
        text-align: center;
    }

    &-next-prev {
        padding: 7px 0px;
        background: rgba(0, 0, 0, 0.2);
        text-align: center;
        border-radius: 23px;
        transform: scale(0.8);
    }
}
/deep/.el-dialog {
    background: transparent !important;
    box-shadow: none !important;
}
/deep/.el-dialog__header,
/deep/.el-dialog__body {
    padding: 0 !important;
}
/deep/.complaint[data-v-3d3b56b7] {
    margin-left: 0;
}

.share-card {
    left: 73%;
    top: calc((100vh - 1rem - 4px) * 0.2 + 325px);
    z-index: 10000;
    padding: 20px;
    background: #272337;
    border-radius: 10px;
    border: 1px solid #353047;
    width: 20%;
}

.scroll-friend {
    overflow-x: scroll;
}

.scroll-friend::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
}
</style>